<template>
	<view class="process_box">
		<view class="process_container">
			<view class="service_info">
				<view class="service_name">{{ orderInfo.goodsName }}</view>
				<view class="service_info_content">
					<view class="service_duration">规格：{{ orderInfo.goodsSkuServiceTime }}</view>
					<view class="service_pets">宠物数量：{{ orderInfo.petNum }}</view>
				</view>
			</view>
			<view class="process_content">
				<view class="process_item" v-for="(item, index) in processList" :key="index">
					<view class="process_icon_ball"></view>
					<view class="process_item_title">
						<view class="process_item_title_status">【{{ statusText(item.type) }}】</view>
						<view class="process_item_title_date">{{ item.time }}</view>
					</view>
					<view class="folk_info_box">
						<view class="folk_info">
							<image class="folk_avatar" :src="item.avatar"></image>
							<view class="folk_name">{{ item.nickName }}</view>
						</view>
						<view v-if="item.type == 3 && item.data" class="public_status">{{ item.data.openFlag == 0 ? "公开发布" : "不公开发布" }}</view>
					</view>
					<!-- 服务评价 -->
					<view v-if="item.type == 4" class="service_evaluation">
						<view>
							<image
								v-for="starItem in Number(item.data.comprehensiveEvaluation)"
								:key="starItem"
								class="service_evaluation_star"
								src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-89.png"></image>
						</view>
						<view class="service_evaluation_text">{{ item.data.content }}</view>
					</view>

					<!-- 完成服务 -->
					<view v-else-if="item.type == 3" class="service_achievement">
						<!-- <view class="service_achievement_title">{{ item.data.openFlag == 0 ? '公开发布':'不公开发布' }}</view> -->
						<view class="service_achievement_image_box">
							<view class="video_box service_achievement_images" v-for="(videoItem, videoIndex) in item?.data?.videos" :key="videoIndex">
								<video :id="`video_${videoIndex}`" class="service_achievement_video" :src="videoItem.url" :direction="0" @play="playVideo(videoItem, videoIndex)"></video>
								<!-- #ifndef MP-TOUTIAO -->
								<cover-image class="service_achievement_cover" v-if="videoItem.cover" :src="videoItem.cover" @tap="playVideo(videoItem, videoIndex)"></cover-image>
								<!-- #endif -->
								<!-- #ifdef MP-TOUTIAO -->
								<image class="service_achievement_cover" v-if="videoItem.cover" :src="videoItem.cover" @tap="playVideo(videoItem, videoIndex)"></image>
								<!-- #endif -->
							</view>
							<image
								v-for="(picItem, picIndex) in splitPicString(item.data.coverPic)"
								class="service_achievement_images"
								:src="picItem"
								mode="aspectFit"
								@tap="previewImages(picIndex, splitPicString(item.data.coverPic))"
								:key="picIndex"></image>
						</view>
						<view class="service_achievement_discription">{{ item.data.content }}</view>
					</view>

					<!-- 开始服务 -->
					<view v-else-if="item.type == 2" class="service_achievement">
						<view class="service_address">
							<view class="service_address_label">位置：</view>
							<view class="service_address_content">{{ item.data.confirmLocation }}</view>
						</view>
						<view v-if="item.data.remarks" class="service_address">
							<view class="service_address_label">备注：</view>
							<view class="service_address_content">{{ item.data.remarks }}</view>
						</view>
						<view class="service_achievement_image_box">
							<image
								v-for="(picItem, picIndex) in splitPicString(item.data.confirmPic)"
								class="service_achievement_images"
								:src="picItem"
								mode="aspectFit"
								@tap="previewImages(picIndex, splitPicString(item.data.confirmPic))"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from "vue";
import api from "@/api";
import { onLoad, onShow } from "@dcloudio/uni-app";

let orderId = "";
let studioId = "";
let processList = reactive([]);

onLoad((data) => {
	orderId = data.orderId;
	studioId = data.studioId;
});

onShow(() => {
	getOrderInfo();
	getOrderProcess();
});

let statusText = (type) => {
	// 0-用户支付; 1-接单; 2-开始服务; 3-完成服务; 4-评价
	switch (Number(type)) {
		case 0:
			return "订单支付";
		case 1:
			return "陪宠师接单";
		case 2:
			return "陪宠师已到达，开始服务";
		case 3:
			return "陪宠师完成服务";
		case 4:
			return "用户评价";
	}
};

const splitPicString = (str) => {
	if (!(typeof str === "string")) return [];
	return str?.split(",");
};

const splitVideoString = (str) => {
	if (!(typeof str === "string")) return [];
	let videoList = null;
	try {
		videoList = JSON.parse(str);
	} catch (error) {
		//TODO handle the exception
		videoList = videoList?.split(",").forEach((url) => {
			url;
		});
	}
	return videoList;
};

const playVideo = (videoInfo, index) => {
	const videoContext = uni.createVideoContext(`video_${index}`);
	videoContext.play();
	videoContext.requestFullScreen({ direction: 0 });
	videoInfo.cover = "";
};

let orderInfo = ref({});

const getOrderInfo = async () => {
	const { data } = await api({
		method: "get",
		url: `/mall/order/order-detail/dayOrderDetail`,
		data: {
			id: orderId,
			studioId: studioId
		}
	});
	orderInfo.value = data;
};
const getOrderProcess = async () => {
	const { data } = await api({
		method: "GET",
		url: `/mall/order/order-detail/getProgress`,
		data: {
			orderDetailId: orderId
		}
	});
	const achievedInfo = data.find((item) => item.type == 3);
	if (achievedInfo) {
		achievedInfo.data.videos = splitVideoString(achievedInfo.data.videos);
	}
	processList = Object.assign(processList, data || []);
};

const previewImages = (currentIndex, urls) => {
	uni.previewImage({
		current: currentIndex,
		urls
	});
};
</script>

<style lang="scss" scoped>
.process_box {
	padding: 34rpx 32rpx;
	background-color: #f9f6f6;

	.process_container {
		padding: 40rpx 32rpx;
		background: #ffffff;
		border-radius: 24rpx 24rpx 24rpx 24rpx;

		.service_info {
			padding-bottom: 40rpx;
			border-bottom: 1rpx solid #e6e6e6;

			.service_name {
				font-weight: bold;
				font-size: 32rpx;
				color: #1a1a1a;
				margin-bottom: 16rpx;
			}
			.service_info_content {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: #7c807f;

				.service_pets {
					margin-left: 24rpx;
					padding-left: 24rpx;
					border-left: 1rpx solid #cacccc;
				}
			}
		}

		.process_content {
			margin-top: 40rpx;

			.process_item {
				width: 100%;
				display: inline-block;
				padding-left: 50rpx;
				border-left: 1rpx solid #e4e6e6;
				position: relative;
				box-sizing: border-box;

				.process_icon_ball {
					width: 16rpx;
					height: 16rpx;
					background: #d0d1d2;
					border-radius: 50%;
					position: absolute;
					left: -8rpx;
					top: 14rpx;
				}

				.process_item_title {
					// display: flex;
					// align-items: center;

					.process_item_title_status {
						font-weight: bold;
						font-size: 30rpx;
						color: #1b2120;
					}
					.process_item_title_date {
						margin-top: 12rpx;
						font-size: 26rpx;
						color: #7c807f;
					}
				}

				.folk_info_box {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.folk_info {
						display: flex;
						align-items: center;
						margin: 24rpx 0;

						.folk_avatar {
							width: 48rpx;
							height: 48rpx;
							border-radius: 50%;
							margin-right: 8rpx;
						}
						.folk_name {
							font-size: 30rpx;
							color: #7c807f;
						}
					}

					.public_status {
						font-size: 30rpx;
						color: #7c807f;
					}
				}

				.service_evaluation {
					.service_evaluation_star {
						width: 64rpx;
						height: 64rpx;
						margin-right: 16rpx;
						margin-bottom: 24rpx;
					}
					.service_evaluation_text {
						font-size: 26rpx;
						color: #7c807f;
						padding-bottom: 80rpx;
					}
				}
				.service_achievement {
					.service_achievement_title {
						font-weight: bold;
						font-size: 30rpx;
						color: #7c807f;
						margin-bottom: 24rpx;
					}
					.service_address {
						display: flex;
						align-self: center;
						font-size: 30rpx;
						color: #7c807f;
						margin-bottom: 24rpx;

						.service_address_content {
							flex: 1;
						}
					}
					.service_achievement_image_box {
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						margin-bottom: 22rpx;

						.service_achievement_images {
							width: 160rpx;
							height: 213rpx;
							margin-right: 16rpx;
							background-color: #1a1a1a;
						}

						.video_box {
							position: relative;

							.service_achievement_video {
								width: 100%;
								height: 100%;
							}
							.service_achievement_cover {
								width: 100%;
								height: 100%;
								position: absolute;
								left: 0;
								bottom: 0;
								z-index: 1;
							}
						}
					}
					.service_achievement_discription {
						font-size: 26rpx;
						color: #7c807f;
						margin-bottom: 24rpx;
					}
				}
			}
			.process_item:last-child {
				border: none;
			}
		}
	}
}
</style>
